<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
</head>

<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="" style="margin-top: 20px;margin-left:20px;">
                        <button class="layui-btn" id="expand">全部展开</button>
                        <button class="layui-btn" id="collapse">全部收起</button>
                        <button class="layui-btn" onclick="loadMenuForm('first')">添加一级菜单</button>
                        <a class="layui-btn " title="刷新当前页" href="javascript:void(0);"
                           onclick="layer.load(1);window.location.reload(true);"><i class="layui-icon"></i>刷新</a>
                        <div id="menu"></div>
                    </div>
                </div>
                <!--菜单列表开始-->
                <div class="show-add-data" style="display: none;padding: 10px">
                    <form id="menu-form" action="" class="layui-form">
                        <input type="hidden" th:name="id">
                        <input type="hidden" th:name="pid">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="text-align: left">
                                父菜单
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="parent-name" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label " style="text-align: left">
                                菜单名称
                            </label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="name">
                            </div>
                        </div>
                        <div class="layui-form-item" id="url_id">
                            <label class="layui-form-label " style="text-align: left">
                                链接
                            </label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="url">
                            </div>
                        </div>
                        <div class="layui-form-item" id="sort_id">
                            <label class="layui-form-label " style="text-align: left">
                                排序
                            </label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="sort">
                            </div>
                        </div>
                        <div class="layui-form-item float-right">
                            <div class="layui-input-block">
                                <a class="layui-btn layui-btn-normal layui-btn-sm add-btn" lay-submit lay-filter="add">添加</a>
                                <a class="layui-btn layui-btn-primary close-btn layui-btn-sm">关闭</a>
                            </div>
                        </div>

                    </form>
                </div>
                <!--菜单列表结束-->
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/assets/layui.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    /*]]>*/
</script>
<script type="text/javascript">
    var menuData;
    $(function () {
        $.ajax({
            type: "get",
            url: contextPath + "/a/menu/queryMenuTree",
            data: "",
            // dataType : "json",
            async: true,
            success: function (jsonData) {
                menuData = jsonData;
                // console.log("menuData" + menuData);
            }
        })
    })

    var layout = [{name: 'id', field: 'id', headerClass: 'value_col', colClass: 'value_col'},
        {name: '菜单名称', field: 'name', treeNodes: true, headerClass: 'value_col', colClass: 'value_col'},
        {name: '菜单路径', field: 'href', headerClass: 'value_col', colClass: 'value_col'},
        // {name: '排序', field: 'sort', headerClass: 'value_col', colClass: 'value_col'},
        {
            name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 30%',
            render: function (row) {
                return [
                    '<a class="layui-btn layui-btn-xs layui-btn" lay-event="del"   onclick="add(' + row.id + ')" title="新增"> <i class="layui-icon ">&#xe654;</i> </a>',
                    '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del"   onclick="edit(' + row.id + ')" title="编辑"> <i class="layui-icon ">&#xe642;</i> </a>',
                    '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"   onclick="del(' + row.id + ')" title="删除"> <i class="layui-icon ">&#xe640;</i> </a>',
                ].join('');
            }
        }
    ];

    layui.use(['form', 'tree', 'layer'], function () {
        // console.log(menuData);
        var layer = layui.layer,
            form = layui.form,
            $ = layui.jquery;
        var menuTree = layui.treeGird({
            elem: '#menu', //传入元素选择器
            spreadable: false, //设置是否全展开，默认不展开
            checkbox: true,
            nodes: menuData,
            layout: layout
        });

        form.render();

        $('#collapse').on('click', function () {
            layui.collapse(menuTree);
        });

        $('#expand').on('click', function () {
            layui.expand(menuTree);
        });

    });

    //添加事件
    function add(obj) {
        //获取对象
        getParentMenu(obj, 'add');
        loadMenuForm('second');
    }

    //编辑菜单
    function edit(obj) {
        //获取对象
        getParentMenu(obj, 'edit');
        getMenu(obj);
        loadMenuForm('second');
    }

    //删除
    function del(menuId) {
        //询问框
        layer.confirm('确认删除？', {
            btn: ['必须的', '算了吧'] //按钮
        }, function () {
            $.ajax({
                type: "get",
                url: contextPath + "/a/menu/delete",
                data: {'menuId': menuId},
                success: function (jsonData) {
                    layer.msg(jsonData.message, {icon: 1, time: 1000}, function () {
                        //重新加载页面
                        layer.load(1);
                        window.location.reload(true);
                    });
                }
            })

        }, function () {
            layer.msg('取消成功', {
                time: 1000, //20s后自动关闭
            });
        });

    }

    //获取菜单
    function getParentMenu(menuId, operate) {
        $.ajax({
            type: "get",
            url: contextPath + "/a/menu/getParentMenu",
            data: {'menuId': menuId},
            success: function (jsonData) {
                $(".show-add-data").find("input[name='parent-name']").val(jsonData.name);
                if (operate == 'add') {
                    $(".show-add-data").find("input[name='pid']").val(jsonData.id);
                }
            }
        })
    }

    //获取菜单
    function getMenu(menuId) {
        $.ajax({
            type: "get",
            url: contextPath + "/a/menu/getMenuById",
            data: {'menuId': menuId},
            success: function (jsonData) {
                $(".show-add-data").find("input[name='id']").val(jsonData.id);
                $(".show-add-data").find("input[name='name']").val(jsonData.name);
                $(".show-add-data").find("input[name='url']").val(jsonData.url);
                // $(".show-add-data").find("input[name='sort']").val(jsonData.sort);
            }
        })
    }

    //加载表单
    function loadMenuForm(obj) {
        //如果是添加一级目录，隐藏父级目录
        if (obj == 'first') {
            $(".show-add-data .layui-form-item:first").hide();
        }
        layer.open({
            type: 1,
            title: '编辑',
            area: ['390px', '330px'],   //宽高
            content: $(".show-add-data"),
            success: function (layero, index) {
                //关闭窗口
                $(layero).find(".close-btn").on("click", function () {
                    layer.close(index);
                });
                //ajax请求
                $(layero).find(".add-btn").on("click", function () {
                    layer.close(index);
                    var data = $("#menu-form").serialize();
                    $.ajax({
                        type: "get",
                        url: contextPath + "/a/menu/save",
                        data: data,
                        success: function (jsonData) {
                            layer.msg('保存成功', {icon: 1, time: 1000}, function () {
                                //重新加载页面
                                layer.load(1);
                                window.location.reload(true);
                            });
                        }
                    })
                });

            }
        });
    }
</script>
</html>